<script setup>
// 处理 v-model 修饰符
// 创建一个自定义的修饰符 capitalize，它会自动将 v-model 绑定输入的字符串值第一个字母转为大写：
const props = defineProps({
  modelValue: String,
  modelModifiers: { default: () => {} }
})
const emit = defineEmits(['update:modelValue'])

function emitValue(e) {
  let value = e.target.value
  if (props.modelModifiers.capitalize) {
    value = value.charAt(0).toUpperCase() + value.slice(1)
  }
  emit('update:modelValue', value)
}

/* 
对于又有参数又有修饰符的 v-model 绑定，生成的 prop 名将是 arg + "Modifiers"。举例来说：
<MyComponent v-model:title.capitalize="myText">

相应的声明应该是：
const props = defineProps(['title', 'titleModifiers'])
defineEmits(['update:title'])

console.log(props.titleModifiers) // { capitalize: true }
*/
</script>

<template>
  <input type="text" :value="modelValue" @input="emitValue">
</template>

<style></style>
